<template>
	<view style="height: 100vh;">
		<view v-if="messageList.length==0" style="text-align: center; margin-top: 10px;">
			暂无聊天列表
		</view>
		<view class="messageList" v-for="item in messageList" :key="item.id"
			@click="goToChat(item.id,getName(item.id))" hover-class="listHover">
			<u-avatar :src="getImage(item.id)" size="16vw"></u-avatar>
			<view class="userInfoBox">
				<view class="userInfo">
					{{getName(item.id)}}
					<text>{{changeTime(item.createTime)}}</text>
				</view>
				<view class="message" v-if="item.msgType==4">
					[图片]
					<text v-if="getUnReadCount(item.id)!=0">{{getUnReadCount(item.id)}}</text>
				</view>
				<view class="message" v-else-if="item.msgType==5">
					[视频通话]
					<text v-if="getUnReadCount(item.id)!=0">{{getUnReadCount(item.id)}}</text>
				</view>
				<view class="message" v-else-if="item.msgType==6">
					[语音通话]
					<text v-if="getUnReadCount(item.id)!=0">{{getUnReadCount(item.id)}}</text>
				</view>
				<view class="message" v-else>
					{{item.lastMessage}}
					<text v-if="getUnReadCount(item.id)!=0">{{getUnReadCount(item.id)}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import dateTime from '../../../utils/dateTime.js';
	import {
		nextTick
	} from "vue";
	import {
		socket
	} from '../../../utils/socket.js';
	import DB from 'utils/sqlite.js';
	export default {
		data() {
			return {
				messageList: [],
				token: uni.getStorageSync("token"),
				userId: uni.getStorageSync("userId"),
				imageMap: {},
				nameMap: {}
			}
		},
		methods: {
			delSession(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changeTime(date) {
				return dateTime.dateTime(date);
			},
			getImage(date) {
				let url = getApp().wurl + "image/userId-" + date + ".png";
				return this.imageMap.get(date+"");	
			},
			getName(date) {
				return this.nameMap.get(date+"");
			},
			getUnReadCount(date) {
				return uni.getStorageSync("unReadCount" + date);
			},
			goToChat(userId, userName) {
				uni.navigateTo({
					url: "/pages/contact/chat/chat?userId=" + userId + "&userName=" + userName
				})
			},
			getLastMsgList() {
				let open = DB.isOpen();
				if (open) {
					// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
					DB.selectTableData("chatList_" + uni.getStorageSync("userId"))
						.then(res => {
							console.log("chatList表数据", res);
							this.messageList = res;
						})
						.catch(error => {
							console.log("chatList表数据查询失败", error);
						});
				} else {
					this.showToast("数据库未打开");
				}
			},
			getMsg() {
				this.$nextTick(() => {
					this.getLastMsgList();
				})
			}
		},
		onLoad() {
		},
		onShow() {
			this.imageMap = new Map(Object.entries(JSON.parse(uni.getStorageSync("friendImage"))));
			this.nameMap = new Map(Object.entries(JSON.parse(uni.getStorageSync("friendName"))));
			setTimeout(() => {
				this.getMsg();
			}, 500);
			socket.getMessage(res => {
				this.getMsg();
			})
		},
		onPullDownRefresh() {
			this.getMsg();
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss">
	.title {
		background-color: #41A863;
		color: #fff;
	}

	.messageList {
		display: flex;
		padding: 5px 2vw;

		.userInfoBox {
			width: 80vw;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.userInfo {
				display: flex;
				justify-content: space-between;
				margin: 0 2vw;

				text {
					font-size: x-small;
				}
			}

			.message {
				display: flex;
				justify-content: space-between;
				margin: 0 2vw;
				font-size: small;
				color: #A09D9D;

				text {
					width: 16px;
					height: 16px;
					border-radius: 8px;
					text-align: center;
					line-height: 16px;
					background-color: #A09D9D;
					color: #fff;
					font-size: x-small;
				}
			}
		}
	}

	.listHover {
		background-color: #C3C3C3;
	}
</style>